<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <el-card shadow="never">
    <el-collapse-transition>
      <el-form ref="query" v-if="searchShow" :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <!--文本框-->
        <el-form-item>
          <el-input v-model="dataForm.invCode"
                    placeholder="商品编码" clearable></el-input>
        </el-form-item>
        <!--文本框-->
        <el-form-item>
          <el-input v-model="dataForm.invName"
                    placeholder="商品名称" clearable></el-input>
        </el-form-item>
        <!--文本框-->
        <el-form-item>
          <el-input v-model="dataForm.barcode"
                    placeholder="条形码" clearable></el-input>
        </el-form-item>
        <!--文本框-->
        <el-form-item>
          <el-input v-model="dataForm.brandName"
                    placeholder="品牌" clearable></el-input>
        </el-form-item>
        <!--文本框-->
        <el-form-item>
          <el-input v-model="dataForm.sortCode"
                    placeholder="商品分类编码" clearable></el-input>
        </el-form-item>
        <!--文本框-->
        <el-form-item>
          <el-input v-model="dataForm.vendorCode"
                    placeholder="供应商编码" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="dataForm.invType" placeholder="存货属性" style="width: 100%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!--下拉框-->
        <el-form-item>
          <el-select v-model="dataForm.status" placeholder="状态 1正常 0 停用" clearable>
            <el-option v-for="template in $getDictList('SYS_STATUS', true)"
                       :key="template.val"
                       :label="template.label"
                       :value="template.val"></el-option>
          </el-select>
        </el-form-item>
        <!--文本框-->
        <el-form-item>
          <el-input v-model="dataForm.vendorName"
                    placeholder="供应商名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDataList()">{{ $t('query') }}</el-button>
          <el-button @click="searchReset()">{{ $t('reset') }}</el-button>
        </el-form-item>
      </el-form>
    </el-collapse-transition>
    <vxe-toolbar :custom="{immediate:true}">
      <template v-slot:buttons>
        <el-button v-if="$hasPermission('mdm:mdmInventoryZp1:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
        <el-button v-if="$hasPermission('mdm:mdmInventoryZp1:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
        <el-button v-if="$hasPermission('mdm:mdmInventoryZp1:action')" @click="actionHandle()" icon="el-icon-key">启用</el-button>
        <el-button v-if="$hasPermission('mdm:mdmInventoryZp1:stop')" @click="stopHandle()" icon="el-icon-lock">停用</el-button>
      </template>
      <template v-slot:tools>
        <el-button icon="el-icon-search" @click="searchShowHandle()" circle></el-button>
        <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button>
        <el-button icon="el-icon-download" @click="exportHandle()" circle></el-button>
      </template>
    </vxe-toolbar>
    <vxe-table ref="xTable"
               :loading="dataListLoading"
               class="vxe-table-element"
               :height="this.tableHeight"
               auto-resize
               :sort-config="{trigger:'cell'}"
               @sort-change="sortChange"
               @select-change="dataListSelectionChangeHandleVex"
               @select-all="dataListSelectionAllChangeHandleVex"
               :data="dataList">
      <vxe-table-column type="checkbox" align="center" width="40"></vxe-table-column>
      <vxe-table-column field="invCode" title="商品编码">
      </vxe-table-column>
      <vxe-table-column field="invName" title="商品名称">
      </vxe-table-column>
      <vxe-table-column field="barcode" title="条形码">
      </vxe-table-column>
      <vxe-table-column field="brandName" title="品牌">
      </vxe-table-column>
      <vxe-table-column field="sortCode" title="商品分类编码">
      </vxe-table-column>
      <vxe-table-column field="vendorCode" title="供应商编码">
      </vxe-table-column>
      <vxe-table-column field="status" title="状态">
        <template slot-scope="scope">
          {{$getDictLabel('SYS_STATUS', scope.row.status)}}
          <!--          <span>{{scope.row.state ===1 ? '启用':'停用'}}</span>-->
        </template>
      </vxe-table-column>
      <vxe-table-column field="vendorName" title="供应商名称">
      </vxe-table-column>
      <vxe-table-column title="handle" width="120" show-overflow="false" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button v-if="$hasPermission('mdm:mdmInventoryZp1:update')" type="text" size="small" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row)">{{ $t('update') }}</el-button>
          <el-button v-if="$hasPermission('mdm:mdmInventoryZp1:delete')" type="text" size="small" icon="el-icon-delete" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <el-pagination
      :current-page="page"
      :page-sizes="pageSizes"
      :page-size="limit"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="pageSizeChangeHandle"
      @current-change="pageCurrentChangeHandle">
    </el-pagination>
  </el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
// 混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项，不推荐全局注册混入  注册
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      searchShow: true,
      mixinViewModuleOptions: {
        getDataListURL: '/mdm/mdmInventoryZp1/page',
        getDataListIsPage: true,
        deleteURL: '/mdm/mdmInventoryZp1',
        actionURL: '/mdm/mdmInventoryZp1/action',
        stopURL: '/mdm/mdmInventoryZp1/stop',
        deleteIsBatch: true,
        exportURL: '/mdm/mdmInventoryZp1/export'
      },
      headLock: true,
      dataForm: {
        invCode: '',
        invName: '',
        barcode: '',
        brandName: '',
        sortCode: '',
        vendorCode: '',
        status: '',
        vendorName: ''
      },
      options: [{
        value: '1',
        label: '商品'
      }, {
        value: '2',
        label: '赠品'
      }, {
        value: '3',
        label: '物料'
      }, {
        value: '4',
        label: '润滑油'
      }, {
        value: '5',
        label: '烟草'
      }]
    }
  },
  methods: {
    // 新增 / 修改
    addOrUpdateHandle (row) {
      let title = '新增'
      let id
      if (row) {
        title = row.title
        id = row.id
      }
      // 打开路由
      var router = {
        name: 'mdm-mdmInventoryZp1-editTab',
        id: id,
        menuId: this.$route.meta.menuId,
        oldName: 'mdm-mdmInventoryZp1',
        path: 'mdm/mdmInventoryZp1-editTab',
        title: '编辑shangpin----' + title
      }
      var params = {
        id: id,
        timestamp: this.$xeutils.timestamp()
      }
      this.$options.methods.openNewTab(this.$router, router, params)
    },
    // 启用
    actionHandle () {
      if (
        this.dataListSelections.length <= 0
      ) {
        return this.$message({
          message: this.$t('prompt.actionBatch'),
          type: 'warning',
          duration: 500
        })
      }
      this.$confirm(
        this.$t('prompt.info', { handle: this.$t('启用') }),
        this.$t('prompt.title'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      )
        .then(() => {
          this.$http['post'](
            `${this.mixinViewModuleOptions.actionURL}`,
            this.dataListSelections.map(
              (item) =>
                item[this.mixinViewModuleOptions.deleteIsBatchKey]
            )
          )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return
              }
              this.$message({
                message: this.$t('prompt.success'),
                type: 'success',
                duration: 500,
                onClose: () => {
                  if (this.mixinViewModuleOptions.treeType) {
                    this.getTreeDataList()
                  } else {
                    this.getDataList()
                  }
                }
              })
            })
            .catch(() => { })
        })
        .catch(() => { })
    },
    // 停用
    stopHandle (id) {
      // this.$userBehavior.sendUserBehavior(this.$route.path, 0, 'deleteHandle', '删除数据--' + this.mixinViewModuleOptions.deleteURL)
      if (
        this.dataListSelections.length <= 0
      ) {
        return this.$message({
          message: this.$t('prompt.stopBatch'),
          type: 'warning',
          duration: 500
        })
      }
      this.$confirm(
        this.$t('prompt.info', { handle: this.$t('停用') }),
        this.$t('prompt.title'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      )
        .then(() => {
          this.$http['post'](
            `${this.mixinViewModuleOptions.stopURL}`,
            this.dataListSelections.map(
              (item) =>
                item[this.mixinViewModuleOptions.deleteIsBatchKey]
            )
          )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return
              }
              this.$message({
                message: this.$t('prompt.success'),
                type: 'success',
                duration: 500,
                onClose: () => {
                  if (this.mixinViewModuleOptions.treeType) {
                    this.getTreeDataList()
                  } else {
                    this.getDataList()
                  }
                }
              })
            })
            .catch(() => { })
        })
        .catch(() => { })
    }
  }
}
</script>
